<template>
  <div>
    <audio src="http://boscdn.bpc.baidu.com/v1/developer/5145bdcd-9fcf-445d-a743-1b2e0dcda162.mp3" ref="audio"></audio>
    <transition name="el-zoom-in-center">
    <div v-show="show" class="head_box">
      <el-row :gutter="12">
        <el-col :span="8">
          <el-card class="box-card-total" shadow="hover">
            <div class="text1 item">
              <b>总订单</b>
            </div>
            <div class="text item">
              <b>{{allCount}}</b>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card-new" shadow="hover">
            <div class="text1 item">
              <b>新订单</b>
            </div>
            <div class="text item">
              <b>{{newCount}}</b>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card-ing" shadow="hover">
            <div class="text1 item">
              <li class="el-icon-loading" style="margin-right: 16px"></li>
              <b>进行中订单</b>
            </div>
            <div class="text item">
              <b>{{activeCount}}</b>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    </transition>
    <el-collapse-transition>
    <el-card v-show="show" shadow="always" class="orderTable">
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%">
        <el-table-column
          label="日期"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收货人"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>下单用户: {{ scope.row.user.username }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.contactname}}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="电话"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-mobile-phone"></i>
            <span style="margin-left: 10px">{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="地址"
          width="200">
          <template slot-scope="scope">
            <i class="el-icon-location-outline"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="配送费"
          width="100">
          <template slot-scope="scope">
            <i class="el-icon-goods"></i>
            <span style="margin-left: 10px">{{ scope.row.deliveryCost }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="250">
          <template slot-scope="scope">
            <i class="el-icon-edit"></i>
            <span style="margin-left: 10px">{{ scope.row.remarks | capitalize}}</span>
            <span style="margin-left: 10px" v-if="isPayPattern(scope.row.remarks, 'wechat')"><el-tag type="success">wechat</el-tag></span>
            <span style="margin-left: 10px" v-if="isPayPattern(scope.row.remarks, 'alipay')"><el-tag type="primary">alipay</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单状态"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-view"></i>
            <span style="margin-left: 10px" v-if="scope.row.status == 0"><el-tag type="danger">未接单</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 1"><el-tag type="warning">已接单</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 2"><el-tag >配送中</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 3"><el-tag type="success">已完成</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 4"><el-tag type="info">拒绝</el-tag></span>
            <span style="margin-left: 10px" v-if="scope.row.status == 5"><el-tag type="info">已取消</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="watchOrder(scope.row)">查看</el-button>
            <span style="margin-left: 10px" v-if="scope.row.status == 0">
              <el-button
                size="mini"
                type="success"
                @click="comfirm(scope.row, 1)">接单</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="reject(scope.row, 4)">拒接</el-button>
            </span>
            <span style="margin-left: 10px" v-if="scope.row.status == 1">
               <el-button
                 size="mini"
                 class="el-button--primary"
                 @click="deliver(scope.row, 2)">配送</el-button>
            </span>
            <span style="margin-left: 10px" v-if="scope.row.status == 2">
               <el-button
                 size="mini"
                 class="el-button--primary"
                 @click="complete(scope.row, 3)">完成</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[4,8,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="orderTotal">
      </el-pagination>
    </el-card>
    </el-collapse-transition>
    <!--弹出框-->

    <el-dialog :visible.sync="dialogTableVisible">
      <div v-if="currentOrder">
        <el-card style="margin: 16px 0;">
          <h2 class="details-title">订单详情</h2>
          <h4 class="sub-details-title">订单商品</h4>
          <el-table :data="currentOrder['orderItems']" border style="width: 100%">
            <el-table-column prop="productName" label="名称" width="180"></el-table-column>
            <el-table-column prop="productCount" label="数量" width="180"></el-table-column>
            <el-table-column label="单价" width="180">
              <template slot-scope="scope">￥ {{ scope.row['productPrice'] }}</template>
            </el-table-column>
            <el-table-column label="总价" width="180">
              <template slot-scope="scope">￥ {{ scope.row['productPrice'] * scope.row['productCount'] }}</template>
            </el-table-column>
            <el-table-column label="图片" width="180">
              <template slot-scope="scope">
                <div class="details-image" :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(scope.row['productImage']) + ')' }"></div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="comment">
            <h4 class="sub-details-title">评价</h4>
            <el-rate
              v-model="comment.rank"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
            <el-card class="box-card" style="color: grey; margin: 10px">
              <table style="width: 100%">
                <tr>
                  <td>
                    {{comment.message}}
                  </td>
                  <td style="float: right">
                    {{comment.createTime}}
                  </td>
                </tr>
              </table>

            </el-card></div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Orders',
  data () {
    return {
      tableData: [],
      that: this,
      dialogTableVisible: false,
      newCount: '',
      activeCount: '',
      allCount: '',
      gridData: '',
      show: false,
      loading: true,
      orderTotal: 0,
      currentPage: 1,
      pageSize: 8,
      websock: '',
      currentOrder: null,
      comment: ''
    }
  },
  created () {
    this.initWebSocket()
    this.initOrderCount(this.$store.state.store.id)
    this.getOrders(this.$store.state.store.id, this.currentPage, this.pageSize)
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      var index = value.lastIndexOf('-')
      return value.substr(0, index)
    }
  },
  methods: {
    watchOrder (order) {
      this.currentOrder = order
      this.$merchantAPI.order_comment(order.id).then((params) => {
        this.comment = params.data
      }).catch((params) => {
      })
      this.dialogTableVisible = true
    },
    comfirm (order, status) {
      this.$merchantAPI.store_updateStatus(order.id, status).then((params) => {
        order.status = 1
        this.initOrderCount(this.$store.state.store.id)
      }).catch((params) => {
      })
    },
    reject (order, status) {
      this.$merchantAPI.store_updateStatus(order.id, status).then((params) => {
        order.status = 4
        this.initOrderCount(this.$store.state.store.id)
      }).catch((params) => {
      })
    },
    deliver (order, status) {
      this.$merchantAPI.store_updateStatus(order.id, status).then((params) => {
        order.status = 2
        this.initOrderCount(this.$store.state.store.id)
      }).catch((params) => {
      })
    },
    complete (order, status) {
      this.$merchantAPI.store_updateStatus(order.id, status).then((params) => {
        order.status = 3
        this.initOrderCount(this.$store.state.store.id)
      }).catch((params) => {
      })
    },
    isPayPattern (remarks, pattern) {
      return remarks.indexOf(pattern) !== -1
    },
    initWebSocket () {
      const wsuri = 'ws://10.222.29.195:8999/merchant/order'
      this.websock = new WebSocket(wsuri)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onclose = this.websocketclose
    },
    websocketonmessage (e) {
      this.$notify({
        title: '新订单',
        message: e.data,
        type: 'success'
      })
      this.$refs.audio.play()
      this.getOrders(this.$store.state.store.id, this.currentPage, this.pageSize)
      this.initOrderCount(this.$store.state.store.id)
    },
    websocketsend (agentData) {
      this.websock.send(agentData)
    },
    websocketclose (e) { // 关闭
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.getOrders(this.$store.state.store.id, this.currentPage, val)
      this.initOrderCount(this.$store.state.store.id)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.getOrders(this.$store.state.store.id, val, this.pageSize)
    },
    getOrders (storeId, page, pageSize) {
      this.$merchantAPI.order_all(storeId, page, pageSize).then((params) => {
        this.currentPage = params.data['pageIndex']
        this.pageSize = params.data['pageCount']
        this.orderTotal = params.data['itemTotal']
        this.tableData = params.data['items']
        setTimeout(() => {
          this.loading = false
        }, 500)
        this.show = true
      }).catch((params) => {
      })
    },
    initOrderCount (storeId) {
      this.$merchantAPI.order_allCount(storeId).then((params) => {
        this.allCount = params.data
      }).catch((params) => {
      })
      this.$merchantAPI.order_activeCount(storeId).then((params) => {
        this.activeCount = params.data
      }).catch((params) => {
      })
      this.$merchantAPI.order_newCount(storeId).then((params) => {
        this.newCount = params.data
      }).catch((params) => {
      })
    }
  }
}
</script>

<style scoped>
  .head_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text {
    font-size: 2.5em;
    color: aliceblue;
  }
  .box-card{
  }
  .text1 {
    font-size: 1.5em;
    color: aliceblue;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
  }

  .box-card-total {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    margin-top: 40px;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 40px;
    background: -webkit-gradient(linear, left top, left bottom, from(#eea2a2), to(#7ac5d8));
  }

  .box-card-new {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    margin-top: 40px;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 40px;
    background: -webkit-gradient(linear, left top, left bottom, from(#9be15d), to(#00e3ae));
  }

  .box-card-ing {
    width: 300px;
    border: 2px solid white;
    height: 200px;
    border-radius: 20px;
    position: relative;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-left: 80px;
    margin-right: 80px;
    margin-bottom: 40px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0844), to(#ffb199));
  }

  .box-card-total:hover {
    top: -25px;
    background: -webkit-gradient(linear, left top, left bottom, from(#df89b5), to(#c2e9fb));
  }

  .box-card-new:hover {
    top: -25px;
    background: -webkit-gradient(linear, left top, left bottom, from(#2af598), to(#009efd));
  }

  .box-card-ing:hover {
    top: -25px;
    background: -webkit-gradient(linear, left top, left bottom, from(#f77062), to(#fe5196));
  }

  .orderTable {
    border-radius: 20px;
  }
  .details-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
</style>
